<template>
<view>
<!-- pages/topicality/xiaofeiquan/xiaofeiquan.wxml -->
<!--<import src="../../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<view>
  <!--  -->
  <image src="http://imgbdb3.bendibao.com/xcx/20206/23/2020623094828_71858.jpg" class="main-img">
    <view class="city-box">
      <text>{{city}}</text>
      <!-- <image src="/images/dwicon.png"></image> -->
    </view>
    <view class="change-city">
      <text style="margin-left: 70rpx;">切换城市:</text>
      <picker @change="bindProv" :value="pindex" :range="provPick">
        <view class="sel-city">
          <view class="picker">
            <text>{{provPick[pindex]}}</text>
          </view>
          <image src="/static/images/dwicon.png"></image>
        </view>
      </picker>
      <picker @change="bindCity" :value="cindex" :range="cityPick">
        <view class="sel-city">
          <view class="picker">
            <text>{{cityPick[cindex]}}</text>
          </view>
          <image src="/static/images/dwicon.png"></image>
        </view>
      </picker>
    </view>
  </image>
  <view class="xfj-box">
    <!-- 最新消息 -->
    <view class="xfj" v-if="newsData">
      <view class="xfj-title">
        <image src="/static/images/sys/xf_icon2.png"></image>
        <text>最新情报</text>
      </view>
      <view class="tips-box">
        <view v-for="(item, index) in newsData" :key="index" :class="showMore1?'tips':'tips1'" @tap="newsBtn" :data-index="index">
          <image src="/static/images/sys/laba.png"></image>
          <text>{{item.title}}</text>
        </view>
      </view>
    </view>
    <!-- 预约指南 -->
    <view class="xfj">
      <view class="xfj-title">
        <image src="/static/images/sys/xf_icon2.png"></image>
        <text>预约指南</text>
      </view>
      <view class="tips-box">
        <view class="content-box">
          <view class="cont-title">
            <view :class="(flag == 1?'wtitle2':'wtitle1') + ' tab-item'" v-if="website.place[0]" @tap="btnClick" data-flag="1">
              网上预约
            </view>
            <view :class="(flag == 2?'dtitle2':'dtitle1') + ' tab-item'" v-if="callData.place[0]" @tap="btnClick" data-flag="2">
              电话预约
            </view>
            <view :class="(flag == 3?'xtitle2':'xtitle1') + ' tab-item'" v-if="onsiteDate.place[0]" @tap="btnClick" data-flag="3">
              现场预约
            </view>
          </view>
          <!-- 网上预约 -->
          <view class="wcont-box" v-if="flag == 1">
            <!-- <view class="{{webMore1?'yyplatform':'yyplatform1'}}" wx:for="{{website.platform}}" wx:key="index">
              <view class="wcont">
                <text>预约平台名称</text>
                <text>{{item.name}}</text>
              </view>
              <view class="wcont">
                <text>预约时间</text>
                <text>{{item.yy_time}}</text>
              </view>
              <view class="yuyueBtn" bindtap="seeDetail" data-id="{{item.id}}" data-type="{{item.type}}" data-citycode="{{item.citycode}}" data-url="{{item.url}}" data-title="{{item.name}}" wx:if="{{item.url}}">
                点我预约
              </view>
              <view class="tapbtn">
                <view class="yybtn" wx:if="{{item.course}}" bindtap="seeDetail" data-id="{{item.cid}}" data-type="{{item.ctype}}" data-citycode="{{item.citycode}}" data-url="{{item.course}}" data-title="{{item.name}}">
                  <image src="/images/sys/xf_icon1.png"></image>
                  <text>预约教程</text>
                </view>
                <view class="yybtn" wx:if="{{item.question}}" bindtap="seeDetail" data-id="{{item.qid}}" data-type="{{item.qtype}}" data-citycode="{{item.citycode}}" data-url="{{item.question}}" data-title="{{item.name}}">
                  <image src="/images/sys/xf_icon1.png"></image>
                  <text>常见问题</text>
                </view>
              </view>
            </view>
            <view class="yuyueBtn" wx:if="{{website.platform.length>2 && webMore1}}" bindtap="seemoreBtn" data-flag="1">
              查看更多平台信息
            </view> -->
            <view class="palce-box">
              <view class="palce-title">
                <view class="hline"></view>
                <text>点位信息</text>
                <view class="hline"></view>
              </view>
              <view v-for="(item, index) in website.place" :key="index" :class="webMore2?'yyplatform':'yyplatform1'">
                <view class="wcont" v-if="item.name">
                  <text>点位名称</text>
                  <view>{{item.name}}</view>
                </view>
                <view class="wcont" v-if="item.addr" @tap="mapBtn" :data-lng="item.jd" :data-lat="item.wd" :data-name="item.name" :data-addr="item.addr" :data-tel="item.tel" data-flag="九价疫苗">
                  <text>点位地址</text>
                  <view>
                    {{item.addr}}
                    <text style="color:#5195DD">【地图】</text>
                  </view>
                </view>
                <view class="wcont" v-if="item.platform">
                  <text>预约平台</text>
                  <!-- <view> -->
                  <!-- <text style="color:{{plat.url?'#5195DD':''}}" wx:if="{{item.platarr}}" wx:key="index" wx:for-item="plat" bindtap="seeDetail" data-id="{{plat.id}}" data-type="{{plat.type}}" data-citycode="{{plat.citycode}}" data-url="{{plat.url}}" data-title="{{plat.name}}">
                    {{plat.name}}
                  </text> -->
                  <text style="color:red" v-if="item.platform" @tap="seeDetail" :data-url="item.platform" :data-title="item.name">{{item.platform}}</text>
                  <!-- </view> -->
                </view>
                
                <view class="wcont" v-if="item.yy_time">
                  <text>预约时间</text>
                  <view>{{item.yy_time}}</view>
                </view>
                <view class="wcont" v-if="item.minge">
                  <text>预约名额</text>
                  <view>{{item.minge}}</view>
                </view>
                <view class="wcont" v-if="item.tel">
                  <text>咨询电话</text>
                  <view>{{item.tel}}</view>
                </view>
                <view class="wcont" v-if="item.condition">
                  <text>预约条件</text>
                  <view>{{item.condition}}</view>
                </view>
                <view class="control flex">
                  <view class="path" v-if="item.course" @tap="control" :data-index="index" data-type="website" data-navitype="path">
                    <image src="http://m.fs.bendibao.com/news/jiujiayimiao/images/course.png"></image>
                    <text>预约教程</text>
                  </view>
                  <view class="method" v-if="item.url" @tap="control" :data-index="index" data-type="website" data-navitype="method">
                    <image src="http://m.fs.bendibao.com/news/jiujiayimiao/images/course.png"></image>
                    <text>点我预约</text>
                  </view>
                </view>
              </view>
              <view class="yuyueBtn" v-if="website.place.length>=2 && webMore2" @tap="seemoreBtn" data-flag="2">
                查看更多点位信息
              </view>
            </view>
          </view>
          <!-- 电话预约 -->
          <view class="wcont-box" v-if="flag == 2">
            <view class="palce-box">
              <view class="palce-title">
                <view class="hline"></view>
                <text>点位信息</text>
                <view class="hline"></view>
              </view>
              <view v-for="(item, index) in callData.place" :key="index" :class="callMore?'yyplatform':'yyplatform1'">
                <view class="wcont" v-if="item.name">
                  <text>点位名称</text>
                  <view>{{item.name}}</view>
                </view>
                <view class="wcont" v-if="item.addr" @tap="mapBtn" :data-lng="item.jd" :data-lat="item.wd" :data-name="item.name" :data-addr="item.addr" :data-tel="item.tel" data-flag="九价疫苗">
                  <text>点位地址</text>
                  <view>
                    {{item.addr}}
                    <text style="color:#5195DD">【地图】</text>
                  </view>
                </view>
                <view class="wcont" v-if="item.platform">
                  <text>预约平台</text>
                  <view>
                    <text style="color:red" @tap="seeDetail" :data-url="item.platform" :data-title="item.name">{{item.platform}}</text>
                  </view>
                </view>
                <view class="wcont" v-if="item.yy_time">
                  <text>预约时间</text>
                  <view>{{item.yy_time}}</view>
                </view>
                <view class="wcont" v-if="item.minge">
                  <text>预约名额</text>
                  <view>{{item.minge}}</view>
                </view>
                <view class="wcont" v-if="item.tel">
                  <text>咨询电话</text>
                  <view>{{item.tel}}</view>
                </view>
                <view class="wcont" v-if="item.condition">
                  <text>预约条件</text>
                  <view>{{item.condition}}</view>
                </view>
                <view class="control flex">
                  <view class="path" v-if="item.course" @tap="control" :data-index="index" data-type="callData" data-navitype="path">
                    <image src="http://m.fs.bendibao.com/news/jiujiayimiao/images/course.png"></image>
                    <text>预约教程</text>
                  </view>
                  <view class="method" v-if="item.url" @tap="control" :data-index="index" data-type="callData" data-navitype="method">
                    <image src="http://m.fs.bendibao.com/news/jiujiayimiao/images/course.png"></image>
                    <text>点我预约</text>
                  </view>
                </view>
              </view>
              <view class="yuyueBtn" v-if="callData.place.length>=2 && callMore" @tap="seemoreBtn" data-flag="3">
                查看更多点位信息
              </view>
            </view>
          </view>
          <!-- 现场预约 -->
          <view class="wcont-box" v-if="flag == 3">
            <view class="palce-box">
              <view class="palce-title">
                <view class="hline"></view>
                <text>点位信息</text>
                <view class="hline"></view>
              </view>
              <view v-for="(item, index) in onsiteDate.place" :key="index" :class="onsiteMore?'yyplatform':'yyplatform1'">
                <view class="wcont" v-if="item.name">
                  <text>点位名称</text>
                  <view>{{item.name}}</view>
                </view>
                <view class="wcont" v-if="item.addr" @tap="mapBtn" :data-lng="item.jd" :data-lat="item.wd" :data-name="item.name" :data-addr="item.addr" :data-tel="item.tel" data-flag="九价疫苗">
                  <text>点位地址</text>
                  <view>
                    {{item.addr}}
                    <text style="color:#5195DD">【地图】</text>
                  </view>
                </view>
                <view class="wcont" v-if="item.platform" @tap="seeDetail" :data-index="index">
                  <text>预约平台</text>
                  <view>
                    <text style="color:red" @tap="seeDetail" :data-url="item.platform" :data-title="item.name">{{item.platform}}</text>
                  </view>
                </view>
                <view class="wcont" v-if="item.yy_time">
                  <text>预约时间</text>
                  <view>{{item.yy_time}}</view>
                </view>
                <view class="wcont" v-if="item.minge">
                  <text>预约名额</text>
                  <view>{{item.minge}}</view>
                </view>
                <view class="wcont" v-if="item.tel">
                  <text>咨询电话</text>
                  <view>{{item.tel}}</view>
                </view>
                <view class="wcont" v-if="item.condition">
                  <text>预约条件</text>
                  <view>{{item.condition}}</view>
                </view>
                <view class="control flex">
                  <view class="path" v-if="item.course" @tap="control" :data-index="index" data-type="onsiteDate" data-navitype="path">
                    <image src="http://m.fs.bendibao.com/news/jiujiayimiao/images/course.png"></image>
                    <text>预约教程</text>
                  </view>
                  <view class="method" v-if="item.url" @tap="control" :data-index="index" data-type="onsiteDate" data-navitype="method">
                    <image src="http://m.fs.bendibao.com/news/jiujiayimiao/images/course.png"></image>
                    <text>点我预约</text>
                  </view>
                </view>
              </view>
              <view class="yuyueBtn" v-if="onsiteDate.place.length>=2 && onsiteMore" @tap="seemoreBtn" data-flag="4">
                查看更多点位信息
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 导粉 -->
  <view class="daofen" v-if="daofen">
    <rich-text :nodes="daofen.content" style="user-select:text;-webkit-user-select:text"></rich-text>
  </view>
</view>
<view class="fixed" style="z-index:99999;">
  <button open-type="share" class="share">
    <view>
      <view>分享</view>
      <image class="share-icon" src="http://imgbdb3.bendibao.com/whbdb/20202/28/20200228094105_67638.png"></image>
    </view>
  </button>
  <view class="other-city" @tap="subscribe">来苗提醒</view>
</view>
<!-- 快捷导航 -->
<fastnav :qrcodeimg="qrcodeimg" :citycode="citycode" :showNav="showNav" :showShare="showShare"></fastnav>
<subscribeMessage :city="city" name="九价疫苗" :action="action" :text="subscribeText" @subsuccess="subsuccess"></subscribeMessage>
</view>
</template>

<script>
// pages/topicality/xiaofeiquan/xiaofeiquan.js
//获取应用实例
const app = getApp();
const util = require("../../../utils/util.js");
var QQMapWX = require("../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
const action = "jiujia";
import fastnav from "../../../component/fastnav/fastnav";
import subscribeMessage from "../../../component/subscribeMessage/subscribeMessage";

export default {
  data() {
    return {
      citycode: "hz",
      city: '杭州',
      province: '浙江',
      pindex: 0,
      cindex: 0,
      cityPick: ["选择城市"],
      newsData: [],
      showtk: false,
      showNav: true,
      // 快捷导航是否展开
      showShare: true,
      // 显示分享按钮
      webShow: true,
      // 网上预约显示
      callShow: false,
      // 电话预约显示
      onsiteShow: false,
      // 现场预约显示
      webMore1: false,
      // 网上预约平台更多显示
      webMore2: false,
      // 网上预约点位信息更多显示
      callMore: false,
      //电话预约点位信息更多显示
      onsiteMore: false,
      // 现场预约点位信息更多显示
      flag: 1,
      subscribeText: "来苗提醒",
      provPick: [],
      showMore1: false,
      daofen: false,
      qrcodeimg: "",
      action: "",
      cityArray: "",
      citylist: "",
      infoData: "",
      title: "",
      website: "",
      callData: "",
      onsiteDate: ""
    };
  },

  components: {
    fastnav,
    subscribeMessage
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    util.reportMessage("fangwenliang ", {
      action: "九价疫苗"
    });
    util.getUrl(app.globalData.url).then(res => {
      this.setData({
        city: options.city,
        action
      });
      this.getProvinceData(options.city);
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.title ? this.title : "九价疫苗查询"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: this.title ? this.title : "九价疫苗查询",
      imageUrl: "http://imgbdb3.bendibao.com/xcx/20206/23/2020623094828_71858.jpg",
      query: {
        city: this.citycode
      }
    };
  },
  methods: {
    // 检查是否订阅
    check() {
      util.request("sub_message.php", {
        action: "check",
        name: "九价疫苗",
        city: this.city,
        openid: uni.getStorageSync("openid")
      }, "POST").then(res => {
        this.setData({
          subscribeText: res.data.state == 0 ? "来苗提醒" : "已订阅"
        });
      });
    },

    // 订阅成功
    subsuccess() {
      this.setData({
        subscribeText: "已订阅"
      });
    },

    // 获取定位
    getLocation() {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let city = res.result.address_component.city; // let city="芜湖市";

          let citydata = this.citylist.filter(v => {
            if (city.indexOf(v.cityname) != -1) {
              return v;
            }
          });

          if (citydata != '' && city.indexOf(this.city) == -1) {
            uni.showModal({
              content: '您当前定位城市为' + city + '\n是否需要切换到' + city + '九价疫苗查询？',
              success: res => {
                if (res.confirm) {
                  this.setData({
                    city: Array.isArray(citydata) ? citydata[0].cityname : this.city,
                    citycode: Array.isArray(citydata) ? citydata[0].citycode : this.citycode,
                    province: Array.isArray(citydata) ? citydata[0].province : this.province,
                    cityPick: ["选择城市"]
                  });
                  let clist = [];
                  this.provPick.forEach((v, k) => {
                    if (v == this.province) {
                      this.setData({
                        pindex: k
                      });
                    }
                  });
                  this.cityArray[this.pindex].citylist.forEach(v => {
                    clist.push(v.cityname);
                  });
                  this.setData({
                    cityPick: this.cityPick.concat(clist)
                  });
                  this.cityPick.forEach((v, k) => {
                    if (v == this.city) {
                      this.setData({
                        cindex: k
                      });
                    }
                  }); // 获取城市公众号二维码

                  this.getQrcode(this.citycode);
                  this.getInfoData(this.citycode);
                }
              }
            });
          }
        }
      });
    },

    // 获取城市公众号二维码
    getQrcode(citycode) {
      util.cityConfig(citycode).then(res => {
        this.setData({
          qrcodeimg: res.qrcode
        });
      });
    },

    // 获取城市
    getProvinceData(optcode) {
      let data = {
        action,
        type: "city"
      };
      util.request('zhuanti.php', data).then(res => {
        this.setData({
          cityArray: res.data.data.city
        });
        let provPick = [];
        let citylist = [];
        let clist = [];
        this.cityArray.forEach(v => {
          v.citylist.forEach(v => {
            citylist.push(v);
          });
          provPick.push(v.province);
          this.setData({
            provPick,
            citylist
          });
        });

        if (this.citylist) {
          this.citylist.forEach((v, k) => {
            if (optcode == v.citycode) {
              this.setData({
                citycode: v.citycode,
                city: v.cityname,
                province: v.province
              });
            } else {
              this.setData({
                citycode: this.citycode,
                city: this.city,
                province: this.province
              });
            }
          });
        }

        this.provPick.forEach((v, k) => {
          if (v == this.province) {
            this.setData({
              pindex: k
            });
          }
        });
        this.cityArray[this.pindex].citylist.forEach(v => {
          clist.push(v.cityname);
        });
        this.setData({
          cityPick: this.cityPick.concat(clist)
        });
        this.cityPick.forEach((v, k) => {
          if (v == this.city) {
            this.setData({
              cindex: k
            });
          }
        }); // 获取城市公众号二维码

        this.getQrcode(this.citycode);
        this.getInfoData();

        if (this.citylist != "" && Array.isArray(this.citylist)) {
          // 获取定位
          this.getLocation();
        }
      });
    },

    getInfoData(citycode) {
      let data = {
        action,
        // type: "city",
        citycode: citycode ? citycode : this.citycode
      };
      this.check();
      util.request('zhuanti.php', data).then(res => {
        if (res.data.data.daofen) {
          res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"'); // .replace(/<span>/ig, '<p class="p_class">')
        }

        uni.setNavigationBarTitle({
          title: res.data.data ? res.data.data.title : "九价疫苗查询"
        });
        let newsData = res.data.data.xiaoxi;
        let callData = res.data.data.calldata;
        let onsiteDate = res.data.data.onsitedate;
        let website = res.data.data.website;
        if (onsiteDate.place) onsiteDate.place.forEach(item => {
          item.yy_time = new Date(item.yy_time).getTime() ? item.yy_time : "";
        });
        if (callData.place) callData.place.forEach(item => {
          item.yy_time = new Date(item.yy_time).getTime() ? item.yy_time : "";
        });
        if (website.place) website.place.forEach(item => {
          item.yy_time = new Date(item.yy_time).getTime() ? item.yy_time : "";
        });
        this.setData({
          infoData: res.data.data,
          daofen: res.data.data.daofen,
          title: res.data.data.title,
          newsData,
          website,
          callData,
          onsiteDate,
          flag: website ? '1' : callData ? '2' : '3'
        });

        if (this.website.platform && this.website.platform.length >= 2) {
          this.setData({
            webMore1: true
          });
        }

        if (this.website.place && this.website.place.length >= 1) {
          this.setData({
            webMore2: true
          });
        }

        if (this.callData.place.length >= 2) {
          this.setData({
            callMore: true
          });
        }

        if (this.onsiteDate.place.length >= 2) {
          this.setData({
            onsiteMore: true
          });
        }
      });
    },

    // 省份选择
    bindProv: function (e) {
      this.setData({
        pindex: e.detail.value,
        cindex: 0,
        cityPick: ["选择城市"]
      });
      let clist = [];
      this.cityArray[this.pindex].citylist.forEach(v => {
        clist.push(v.cityname);
      });
      this.setData({
        cityPick: this.cityPick.concat(clist)
      });
    },

    // 城市选择
    bindCity(e) {
      this.setData({
        cindex: e.detail.value
      });
      let cityname = this.cityPick[this.cindex];

      if (this.citylist) {
        this.citylist.forEach(v => {
          if (v.cityname == cityname) {
            let citycode = v.citycode;
            this.setData({
              citycode,
              city: cityname
            });
          }
        });
      } // 获取城市公众号二维码


      this.getQrcode(this.citycode);
      this.getInfoData(this.citycode);
    },

    // 标题点击事件
    btnClick(e) {
      let flag = e.currentTarget.dataset.flag;
      this.setData({
        flag
      });

      if (flag == 1) {
        this.setData({
          webShow: true,
          callShow: false,
          onsiteShow: false
        });
      } else if (flag == 2) {
        this.setData({
          webShow: false,
          callShow: true,
          onsiteShow: false
        });
      } else if (flag == 3) {
        this.setData({
          webShow: false,
          callShow: false,
          onsiteShow: true
        });
      }
    },

    // 查看详情点击事件
    seeDetail(e) {
      let url = util.getValue("url", e);
      let title = util.getValue("title", e);

      if (url.includes("http")) {
        this.setData({
          showtk: true
        });
        util.navContact(title, url);
      }
    },

    // 查看更多
    seemoreBtn(e) {
      let flag = e.currentTarget.dataset.flag;

      if (flag == 1) {
        this.setData({
          webMore1: false
        });
      } else if (flag == 2) {
        this.setData({
          webMore2: false
        });
      } else if (flag == 3) {
        this.setData({
          callMore: false
        });
      } else if (flag == 4) {
        this.setData({
          onsiteMore: false
        });
      }
    },

    // 最新消息点击事件
    newsBtn(e) {
      let index = util.getValue("index", e);
      let data = this.newsData[index];

      if (data && data.url && data.url_arr) {
        let id = data.url_arr.id;
        let title = data.title;
        let url = data.url_arr.url;
        let type = data.url_arr.type;
        let citycode = data.citycode;

        if (id && id != 0) {
          uni.navigateTo({
            url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + citycode
          });
        } else if (url.includes("mp.weixin.qq.com")) {
          uni.navigateTo({
            url: `/pages/webview/webview?path=${url}`
          });
        } else {
          this.setData({
            showtk: true
          });
          util.navContact(title, url);
        }
      }
    },

    // 地图点击事件
    mapBtn(e) {
      let lng = e.currentTarget.dataset.lng;
      let lat = e.currentTarget.dataset.lat;
      let name = e.currentTarget.dataset.name;
      let tel = e.currentTarget.dataset.tel;
      let addr = e.currentTarget.dataset.addr;
      let flag = e.currentTarget.dataset.flag;
      uni.navigateTo({
        url: '/pages/map/map?lng=' + lng + '&lat=' + lat + '&name=' + name + '&tel=' + tel + '&addr=' + addr + '&flag=' + flag
      });
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    /**
     * 页面滑动事件的处理函数
     */
    onPageScroll: function (e) {
      this.setData({
        showNav: false
      });
    },

    control(e) {
      let index = util.getValue("index", e);
      let type = util.getValue("type", e);
      let navitype = util.getValue("navitype", e);
      let data = this[type].place[index];

      if (navitype == "path" && data.course && data.course_arr) {
        if (data.course.includes("mp.weixin.qq.com")) uni.navigateTo({
          url: `/pages/webview/webview?path=${data.url}`
        });else uni.navigateTo({
          url: `/pages/article/detail/detail?id=${data.course_arr.id}&type=${data.course_arr.type}&city=${data.citycode}`
        });
      } else if (navitype == "method") {
        if (data.url) {
          this.setData({
            showtk: true
          });
          util.navContact(data.name, data.url);
        }
      }
    },

    subscribe() {
      console.log("占位：函数 subscribe 未声明");
    }

  }
};
</script>
<style>
/* pages/topicality/xiaofeiquan/xiaofeiquan.wxss */

.main-img {
    width: 100%;
    height: 276rpx;
}

.city-box {
    background: #ffffff;
    border-radius: 35rpx;
    padding: 10rpx 30rpx;
    position: absolute;
    top: 40rpx;
    right: 30rpx;
    display: flex;
    align-items: center;
}

.city-box text {
    font-size: 30rpx;
    font-weight: bolder;
}

.city-box image {
    width: 23rpx;
    height: 15rpx;
    margin-left: 10rpx;
}

.change-city {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 6rpx rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 20rpx;
    padding: 30rpx 0rpx;
    position: absolute;
    top: 235rpx;
    width: 90%;
    margin-left: 36rpx;
    display: flex;
    align-items: center;
}

.change-city text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 36rpx;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
    width: 102rpx;
    text-align: center;
    white-space: nowrap;
}

.sel-city {
    display: flex;
    align-items: center;
    margin-left: 80rpx;
}

.sel-city image {
    width: 19rpx;
    height: 10rpx;
    margin-left: 15rpx
}

.xfj-box {
    margin: 80rpx 36rpx;
    margin-bottom: 115rpx;
}

.xfj {
    margin: 20rpx 0;
}

.xfj view {
    user-select: text;
    -webkit-user-select: text
}

.xfj-title {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.xfj-title image {
    width: 18rpx;
    height: 26rpx;
    margin-right: 15rpx;
}

.xfj-title text {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 44rpx;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
}

.xfj-content {
    background: rgba(242, 244, 252, 1);
    opacity: 1;
    border-radius: 20rpx;
    padding: 40rpx 36rpx;
    margin-top: 34rpx;
}

.xfj-content:nth-of-type(n+4) {
    display: none;
}

.xfj-content1 {
    background: rgba(242, 244, 252, 1);
    opacity: 1;
    border-radius: 20rpx;
    padding: 40rpx 36rpx;
    margin-top: 34rpx;
}

.xfj-item {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    margin-bottom: 32rpx;
}

.item-title {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 36rpx;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
    white-space: nowrap;
    margin-right: 38rpx;
}

.item-text {
    border-bottom: 1rpx solid rgba(236, 236, 236, 1);
    opacity: 1;
    padding-bottom: 26rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 36rpx;
    color: rgba(90, 90, 90, 1);
    flex: 1;
    word-break: break-all;
    display: -webkit-box;
    white-space: pre-wrap;
}

.xfj-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.xfj-btn-box {
    background: #D9E6F8;
    border-radius: 38rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 15rpx 25rpx;
}

.img1 {
    width: 25rpx;
    height: 25rpx;
    margin-right: 8rpx;
}

.img {
    width: 20rpx;
    height: 25rpx;
    margin-right: 8rpx;
}

.xfj-btn-box text {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 36rpx;
    color: rgba(81, 149, 221, 1);
    opacity: 1;
    white-space: nowrap;
}


/* 内容 */

.tips-box {
    margin-top: 30rpx;
}

.tips {
    background-color: #F2F4FC;
    border-radius: 20rpx;
    padding: 30rpx;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 30rpx;
}

.tips:nth-of-type(n+3) {
    display: none
}

.tips image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 30rpx;
}

.tips text {
    color: #5195DD;
    font-size: 28rpx;
    font-weight: 500;
}

.tips1 {
    background-color: #F2F4FC;
    border-radius: 20rpx;
    padding: 30rpx;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 30rpx;
}

.tips1 image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 30rpx;
}

.tips1 text {
    color: #5195DD;
    font-size: 28rpx;
    font-weight: 500;
}

.cont-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;
}

.wcont-box {
    padding: 0 30rpx;
    padding-bottom: 64rpx;
    background-color: #F2F4FC;
}

.yyplatform {
    border-bottom: 1rpx solid #bbb;
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    background-color: #F2F4FC;
}

.yyplatform:nth-of-type(n+3) {
    display: none
}

.yyplatform1 {
    border-bottom: 1rpx solid #bbb;
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
}

.wcont {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 30rpx;
}

.wcont text {
    font-size: 28rpx;
    color: #000;
    font-weight: 500;
    word-break: break-all;
}

.wcont text:first-child {
    min-width: 114rpx;
    margin-right: 50rpx;
}

.wcont view {
    font-size: 28rpx;
    color: #000;
    font-weight: 500;
    margin-left: 70rpx;
}

.yuyueBtn {
    background-color: #61a3e9;
    text-align: center;
    border-radius: 40rpx;
    width: 100%;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #fff;
    font-weight: 500;
}

.tapbtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
}

.yybtn {
    background-color: #DAE6F8;
    border-radius: 38rpx;
    padding: 20rpx 40rpx;
    display: flex;
    align-items: center;
}

.yybtn image {
    width: 23rpx;
    height: 24rpx;
    margin-right: 15rpx;
}

.yybtn text {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(81, 149, 221, 1);
    opacity: 1;
}

.palce-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding: 30rpx 0;
}

.hline {
    width: 20%;
    border: 1rpx solid #5A5A5A;
}

.palce-title text {
    font-size: 28rpx;
    font-family: PingFang SC;
    margin: 0 40rpx;
    font-weight: 500;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
}

.wtitle1 {
    border-radius: 20rpx 0 0 0;
    background-color: #5195DD;
    font-size: 28rpx;
    color: #fff;
    padding: 30rpx 0;
    width: 230rpx;
    text-align: center;
}

.wtitle2 {
    border-radius: 20rpx 0 0 0;
    background-color: #F2F4FC;
    font-size: 28rpx;
    color: #000;
    padding: 30rpx 0;
    text-align: center;
}

.dtitle1 {
    background-color: #5195DD;
    font-size: 28rpx;
    color: #fff;
    padding: 30rpx 0;
    width: 230rpx;
    text-align: center;
}

.dtitle2 {
    background-color: #F2F4FC;
    font-size: 28rpx;
    color: #000;
    padding: 30rpx 0;
    width: 230rpx;
    text-align: center;
}

.xtitle1 {
    border-radius: 0 20rpx 0 0;
    background-color: #5195DD;
    font-size: 28rpx;
    color: #fff;
    padding: 30rpx 0;
    width: 230rpx;
    text-align: center;
}

.xtitle2 {
    border-radius: 0 20rpx 0 0;
    background-color: #F2F4FC;
    font-size: 28rpx;
    color: #000;
    padding: 30rpx 0;
    width: 230rpx;
    text-align: center;
}


/* 查看更多 */

.see-more {
    display: flex;
    justify-content: center;
    margin: 30rpx 0;
}

.see-more view {
    background-color: #EEEEEE;
    padding: 20rpx 40rpx;
    font-size: 26rpx;
    border-radius: 12rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #141414;
    text-align: center;
    width: 200rpx;
    white-space: nowrap;
}


/* 导粉 */

.daofen {
    margin: 0 30rpx 80rpx 30rpx;
    text-align: center;
}

.p_class {
    margin: 10rpx 30rpx;
    line-height: 50rpx;
}

.fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: auto;
    background: #fff;
    padding: 10rpx 0;
    z-index: 999;
}

.share {
    width: 35%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 56rpx;
    color: #ffffff;
    font-weight: 500;
    background-color: #5395DE;
    margin-left: 20rpx;
}

.share view {
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-icon {
    width: 30rpx;
    height: 30rpx;
    margin-left: 10rpx;
}

.other-city {
    width: 65%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border: 0;
    border-radius: 56rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    margin-top: 10rpx;
    color: #ffffff;
    background: #5395DE;
}

.tab-item {
    flex: 1;
}

.control view {
    width: 40%;
    height: 66rpx;
    margin: 0 40rpx;
    line-height: 66rpx;
    font-size: 26rpx;
    color: #5195DD;
    background-color: rgba(81, 149, 221, .15);
    border-radius: 38rpx;
    text-align: center;
}

.control image {
    width: 24rpx;
    height: 24rpx;
    margin-right: 14rpx;
}
</style>